<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>动画</title>
    <style>
        #root {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .p {
            font-size: 80px;
            font-weight: bold;
            position: fixed;
            z-index: 2;
            color: white;
        }

        #first {
            top: 50px;
            left: 150px;
        }

        #second {
            top: 50px;
            right: 150px;
        }

        #third {
            bottom: 50px;
            right: 150px;
        }

        #fourth {
            bottom: 50px;
            left: 150px;
        }

        #animate {
            width: 300px;
            height: 200px;
            background: darkred;
            position: relative;
            animation: run 3s;
            z-index: 1;
            /*无限循环*/
            animation-iteration-count: infinite;
        }

        @keyframes run {
            0% {
                background: darkred;
                left: 0;
                top: 0;
            }
            25% {
                background: chocolate;
                left: 1100px;
                top: 0;
                transform: rotate(360deg)
            }
            50% {
                background: cadetblue;
                left: 1100px;
                top: 650px;
                transform: rotate(720deg)
            }
            75% {
                background: darkolivegreen;
                left: 0;
                top: 650px;
                transform: rotate(0deg)
            }
            100% {
                background: darkred;
                left: 0;
                top: 0;
                transform: rotate(360deg)
            }
        }
    </style>
</head>
<body>
<div id="root">
    <div id="first" class="p">乐</div>
    <div id="second" class="p">新</div>
    <div id="third" class="p">年</div>
    <div id="fourth" class="p">快</div>
    <div id="animate"></div>

</div>

</body>
</html>